<template>
    <view>
        <!-- 分组 1 -->
		<text lines="1" class="text_8">选择课包</text>
		<view class="item">
			<view class=" week-list flex-wrap">
				<view class="week-item" :class="{'active': jiaoSelect.includes(item.item_id)}"
					v-for="item in coursePackageList" :key="item.item_id" @click="handjiao(item)">
					{{ item.name }}
				</view>
			</view>
		</view>
		
		<text lines="1" class="text_8">选择教练</text>
		<view class="item">
			<view class=" week-list flex-wrap">
				<view class="week-item" :class="{'active': coachSelect.includes(item.id)}" v-for="item in coachList"
					:key="item.id" @click="handcoach(item)">
					{{ item.coach_name }}
				</view>
			</view>
		</view>
		
        <u-row>
            <u-col :span="5">
                <u-form-item label="默认分组 1">
                    <u-input v-model="group1" style="width: 150rpx;" @input="changeGroup(1)"></u-input>
                </u-form-item>
            </u-col>
            <u-col :span="1" style="text-align: left;">
                <u-form-item label-width="10rpx">
                    <u-checkbox shape='circle' :checked="filters.open_group1" @change="changeOpen(1)"></u-checkbox>
                </u-form-item>
            </u-col>
            <u-col :span="5" style="text-align: right;">
                <u-button type="primary" size="mini" @click="addSku(1)" :disabled="!filters.open_group1" style="width: 150rpx;">
                    增加
                </u-button>
            </u-col>
        </u-row>
        <u-row v-show="filters.open_group1">
            <u-col :span="12">
                <u-form-item label="默认分组 1 规格">
                    <view v-for="(input, index) in group1SkuList" :key="index" class="input-group">
                        <u-input v-model="input.value" placeholder="请输入内容" style="width: 120rpx;" @input="changeSku(1)"></u-input>
                        <view class="" @click="removeInput(index, 1)">
                            删除
                        </view>
                    </view>
                </u-form-item>
            </u-col>
        </u-row>

        <!-- 分组 2 -->
        <u-row>
            <u-col :span="5">
                <u-form-item label="规格分组 2">
                    <u-input v-model="group2" style="width: 150rpx;" @input="changeGroup(2)"></u-input>
                </u-form-item>
            </u-col>
            <u-col :span="1" style="text-align: left;">
                <u-form-item label-width="10rpx">
                    <u-checkbox shape='circle' :checked="filters.open_group2" @change="changeOpen(2)"></u-checkbox>
                </u-form-item>
            </u-col>
            <u-col :span="5" style="text-align: right;">
                <u-button type="primary" size="mini" @click="addSku(2)" :disabled="!filters.open_group2">
                    增加
                </u-button>
            </u-col>
        </u-row>
        <u-row v-show="filters.open_group2">
            <u-col :span="12">
                <u-form-item label="默认分组 2 规格">
                    <view v-for="(input, index) in group2SkuList" :key="index" class="input-group">
                        <u-input v-model="input.value" placeholder="请输入内容" style="width: 120rpx;" @input="changeSku(2)"></u-input>
                        <view class="" @click="removeInput(index, 2)">
                            删除
                        </view>
                    </view>
                </u-form-item>
            </u-col>
        </u-row>

        <!-- 分组 3 -->
        <u-row>
            <u-col :span="5">
                <u-form-item label="规格分组 3">
                    <u-input v-model="group3" style="width: 150rpx;" @input="changeGroup(3)"></u-input>
                </u-form-item>
            </u-col>
            <u-col :span="1" style="text-align: left;">
                <u-form-item label-width="10rpx">
                    <u-checkbox shape='circle' :checked="filters.open_group3" @change="changeOpen(3)"></u-checkbox>
                </u-form-item>
            </u-col>
            <u-col :span="5" style="text-align: right;">
                <u-button type="primary" size="mini" @click="addSku(3)" :disabled="!filters.open_group3">
                    增加
                </u-button>
            </u-col>
        </u-row>
        <u-row v-show="filters.open_group3">
            <u-col :span="12">
                <u-form-item label="默认分组 3 规格">
                    <view v-for="(input, index) in group3SkuList" :key="index" class="input-group">
                        <u-input v-model="input.value" placeholder="请输入内容" style="width: 120rpx;" @input="changeSku(3)"></u-input>
                        <view class="" @click="removeInput(index, 3)">
                            删除
                        </view>
                    </view>
                </u-form-item>
            </u-col>
        </u-row>
    </view>
</template>

<script>
export default {
    data() {
        return {
            group1: '分组 1',
            group2: '分组 2',
            group3: '分组 3',
            filters: {
                open_group1: false,
                open_group2: false,
                open_group3: false,
                train_course: '模拟课程ID'
            },
            // 初始化时将规格列表置为空
            group1SkuList: [],
            group2SkuList: [],
            group3SkuList: [],
            columns: [],
            tableData: [],
			coursePackageList: [
				{
					course_price: "1000.00",
					hour_num: 10,
					item_id: "186-10-1000.00-0-313",
					name: "初级一对一 ",
				},
				{
					course_price: "1300.00",
					hour_num: 20,
					item_id: "187-10-1300.00-0-313",
					name: "中级一对一",
				},
				{
					course_price: "1800.00",
					hour_num: 30,
					item_id: "188-10-1800.00-0-313",
					name: "高级一对一",
				}
			],
			jiaoSelect: [], //选中的
			coachList: [
				{
					coach_name: "关汉卿",
					coach_pin: "83-关汉卿",
					id: 83,
				},
				{
					coach_name: "纳兰容若",
					coach_pin: "85-纳兰容若",
					id: 85,
				},
				{
					coach_name: "宋之问",
					coach_pin: "91-宋之问",
					id: 91,
				}
			],
			coachSelect: [],
        };
    },
    methods: {
		handjiao(item) {
			let data = item.item_id;
			// 使用indexOf检查是否已选中，避免重复或遗漏
			const index = this.jiaoSelect.indexOf(data);
			if (index > -1) {
				// 如果已选中，则移除
				this.jiaoSelect.splice(index, 1);
			} else {
				// 如果未选中，则添加
				this.jiaoSelect.push(data);
			}
		},
		handcoach(item) {
			let data = item.id;
			// 使用indexOf检查是否已选中，避免重复或遗漏
			const index = this.coachSelect.indexOf(data);
			if (index > -1) {
				// 如果已选中，则移除
				this.coachSelect.splice(index, 1);
			} else {
				// 如果未选中，则添加
				this.coachSelect.push(data);
			}
		},
        changeGroup(num) {
            if (num === 1 && this.group1) {
                this.columns[0].label = this.group1;
            } else if (num === 2 && this.group2) {
                this.columns[1].label = this.group2;
            } else if (num === 3 && this.group3) {
                this.columns[2].label = this.group3;
            }
        },
        changeOpen(type) {
            if (!this.filters.train_course) {
                uni.showToast({ title: '请先选择课程！', icon: 'none' });
                this.filters[`open_group${type}`] = false;
                return;
            }
            this.filters[`open_group${type}`] = !this.filters[`open_group${type}`];
            const skuList = this[`group${type}SkuList`];
            if (this.filters[`open_group${type}`]) {
                // 若勾选，添加一个默认规格
                skuList.push({ value: `规格1` });
            } else {
                // 若取消勾选，清空规格列表
                this[`group${type}SkuList`] = [];
            }
            this.addTableData();
        },
        addSku(type) {
            const list = this[`group${type}SkuList`];
            const length = list.length + 1;
            list.push({ value: `规格${length}` });
            this.addTableData();
        },
        removeInput(index, type) {
            const list = this[`group${type}SkuList`];
            list.splice(index, 1);
            this.addTableData();
        },
        changeSku(type) {
            this.addTableData();
        },
        addTableData() {
            this.tableData = [];
            this.group1SkuList.forEach(val => {
                if (this.group2SkuList.length > 0) {
                    this.group2SkuList.forEach(val2 => {
                        if (this.group3SkuList.length > 0) {
                            this.group3SkuList.forEach(val3 => {
                                this.tableData.push({
                                    group1: val.value,
                                    group2: val2.value,
                                    group3: val3.value,
                                    sku_status: true
                                });
                            });
                        } else {
                            this.tableData.push({
                                group1: val.value,
                                group2: val2.value,
                                group3: null,
                                sku_status: true
                            });
                        }
                    });
                } else {
                    if (this.group3SkuList.length > 0) {
                        this.group3SkuList.forEach(val3 => {
                            this.tableData.push({
                                group1: val.value,
                                group2: null,
                                group3: val3.value,
                                sku_status: true
                            });
                        });
                    } else {
                        this.tableData.push({
                            group1: val.value,
                            group2: null,
                            group3: null,
                            sku_status: true
                        });
                    }
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
}
.u-input {
    margin-right: 10rpx;
}
.u-icon {
    cursor: pointer;
}
.week-list {
			flex-direction: row;
			width: 100%;
			font-size: 24rpx;
			flex-wrap: wrap;
			display: flex;

			.week-item {
				padding: 15rpx 0;
				background-color: rgb(243, 243, 243);
				border-radius: 5rpx;
				text-align: center;
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				font-weight: 500;
				border: solid 2rpx transparent;
				box-sizing: border-box;
				padding: 6rpx 12rpx;
				margin-top: 20rpx;
				margin-right: 20rpx;
			}

			.active {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}

			.active1 {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}

			.active2 {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}

			.check {
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				position: absolute;
				bottom: 10rpx;
				right: 0;
			}
		}
</style>    